import React, {Component, Fragment} from 'react';
import pc from './Browser';

require('./css/frame.css');

export default class Circle extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      show: false,
      pos: {left: '0px', top: '300px'},
      str: '',
    }
  }

  onOver(e) {
    if (!pc()){
      return;
    }
    const {style, data} = this.props;
    let ix = parseInt(style.left);
    let iy = parseInt(style.top);

    this.setState(
      {show: true,},
      () => {
        let tip = document.querySelector("#tip");
        document.querySelector("#words").innerHTML = data;
        let h = tip.offsetHeight;
        let w = tip.offsetWidth;
        tip.style.left = ix - w / 2 + 10 + 'px';
        tip.style.top = iy - h - 35 + 'px';
      });
  }

  onOut(data) {
    if (!pc()){
      return;
    }
    this.setState({
      show: false,
    })
  }

  onClick(data) {
    if (!pc()) {
      let {show} = this.state;
      console.log(show)
      if (!show) {
        const {style, data} = this.props;
        let ix = parseInt(style.left);
        let iy = parseInt(style.top);

        this.setState(
          {show: true,},
          () => {
            let tip = document.querySelector("#tip");
            document.querySelector("#words").innerHTML = data;
            let h = tip.offsetHeight;
            let w = tip.offsetWidth;
            tip.style.left = ix - w / 2 + 20 + 'px';
            tip.style.top = iy - h - 25 + 'px';
          });
      }else{
        this.setState(
          {show: false}
        )
      }
    }else{
      return false;
    }
  }


  render() {
    const {style, data} = this.props;
    const {show, pos, str} = this.state;
    return (
      <div>
        <img
          src={require("./img/red0.png")}
          className="circle"
          style={style}
          onClick={this.onClick.bind(this)}
          onMouseOver={this.onOver.bind(this)}
          onMouseOut={this.onOut.bind(this)}
        />
        {show &&
        (<div className="tips" style={pos} id="tip">
          <span className="bot"></span>
          <div className="tipcont" id="words">{str}</div>
        </div>)
        }
      </div>

    );
  }

}


